{% extends "templates/web.html" %}

{% block page_content %}
<link rel="stylesheet" type="text/css" href="/assets/upsystem/css/tms_common.css">
<div class="tms-container">
    <!-- 搜索和筛选区域 -->
    <div class="order-search-filter">
        <div class="search-row">
            <div class="search-group">
                <label class="tms-form-label">运单号</label>
                <input type="text" class="tms-form-input" id="waybillInput" placeholder="输入运单号">
            </div>
            <div class="search-group">
                <label class="tms-form-label">问题类型</label>
                <select class="tms-form-select" id="problemType">
                    <option value="">全部</option>
                    <option value="材积重比实重大">材积重比实重大</option>
                    <option value="偏远地区附加费确认">偏远地区附加费确认</option>
                    <option value="海关文件要求">海关文件要求</option>
                    <option value="地址验证">地址验证</option>
                </select>
            </div>
            <div class="search-group">
                <label class="tms-form-label">更多筛选</label>
                <button class="tms-btn tms-btn-secondary" id="moreFiltersBtn">
                    <i class="fas fa-filter"></i> 更多筛选
                </button>
            </div>
            <div class="search-group">
                <button class="tms-btn tms-btn-primary" id="searchBtn">
                    <i class="fas fa-search"></i> 搜索
                </button>
            </div>
        </div>
    </div>

    <!-- 状态标签页 -->
    <div class="tms-section">
        <div class="tms-tabs">
            <div class="tms-tab-item active" data-status="all">
                <span class="tms-tab-label">全部</span>
                <span class="tms-tab-count">(1,234)</span>
            </div>
            <div class="tms-tab-item" data-status="pending">
                <span class="tms-tab-label">待处理</span>
                <span class="tms-tab-count">(45)</span>
            </div>
            <div class="tms-tab-item" data-status="processing">
                <span class="tms-tab-label">处理中</span>
                <span class="tms-tab-count">(89)</span>
            </div>
            <div class="tms-tab-item" data-status="completed">
                <span class="tms-tab-label">已完成</span>
                <span class="tms-tab-count">(1,100)</span>
            </div>
        </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="order-actions">
        <button class="tms-btn tms-btn-primary" id="intelligentSettingBtn">
            <i class="fas fa-cog"></i> 智能设置
        </button>
        <button class="tms-btn tms-btn-secondary" id="releaseBtn">
            <i class="fas fa-unlock"></i> 释放
        </button>
        <button class="tms-btn tms-btn-secondary" id="returnBtn">
            <i class="fas fa-undo"></i> 退回
        </button>
        <button class="tms-btn tms-btn-secondary" id="returnDetailsBtn">
            <i class="fas fa-info-circle"></i> 退回详情
        </button>
        <button class="tms-btn tms-btn-secondary" id="awbChangeBtn">
            <i class="fas fa-exchange-alt"></i> AWB变更
        </button>
        <div class="dropdown">
            <button class="tms-btn tms-btn-secondary dropdown-toggle" id="moreActionsBtn">
                更多 <i class="fas fa-chevron-down"></i>
            </button>
            <div class="dropdown-menu" id="moreActionsMenu">
                <a href="#" class="dropdown-item">批量操作</a>
                <a href="#" class="dropdown-item">导出数据</a>
                <a href="#" class="dropdown-item">打印标签</a>
            </div>
        </div>
    </div>

    <!-- 订单表格 -->
    <div class="tms-section">
        <div class="tms-table-container">
            <table class="tms-table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll"></th>
                        <th class="waybill-col">运单号 <i class="fas fa-sort"></i></th>
                        <th class="order-id-col">订单ID <i class="fas fa-sort"></i></th>
                        <th class="tracking-col">跟踪号 <i class="fas fa-sort"></i></th>
                        <th class="shipping-col">运输方式 <i class="fas fa-sort"></i></th>
                        <th class="recipient-col">收件人姓名 <i class="fas fa-sort"></i></th>
                        <th class="status-col">订单状态 <i class="fas fa-sort"></i></th>
                        <th class="time-col">创建时间 <i class="fas fa-sort"></i></th>
                        <th class="weight-col">包裹重量 <i class="fas fa-sort"></i></th>
                        <th class="cost-col">预估费用 <i class="fas fa-sort"></i></th>
                        <th class="country-col">收件人国家 <i class="fas fa-sort"></i></th>
                        <th class="eu-tax-col">EU税号 <i class="fas fa-sort"></i></th>
                        <th class="telephone-col">电话 <i class="fas fa-sort"></i></th>
                        <th class="time-receipt-col">收件时间 <i class="fas fa-sort"></i></th>
                        <th class="outer-packages-col">外包装数量 <i class="fas fa-sort"></i></th>
                        <th class="ioss-code-col">IOSS代码 <i class="fas fa-sort"></i></th>
                        <th class="prepay-col">预付款 <i class="fas fa-sort"></i></th>
                        <th class="delivery-time-col">配送时间 <i class="fas fa-sort"></i></th>
                        <th class="charge-weight-col">计费重量 <i class="fas fa-sort"></i></th>
                        <th class="recipient-address-col">收件人地址 <i class="fas fa-sort"></i></th>
                        <th class="recipient-state-col">收件人州/省 <i class="fas fa-sort"></i></th>
                        <th class="house-number-col">门牌号 <i class="fas fa-sort"></i></th>
                        <th class="company-col">公司 <i class="fas fa-sort"></i></th>
                        <th class="submission-time-col">提交时间 <i class="fas fa-sort"></i></th>
                        <th class="vat-code-col">VAT代码 <i class="fas fa-sort"></i></th>
                        <th class="recipient-city-col">收件人城市 <i class="fas fa-sort"></i></th>
                        <th class="proof-delivery-col">配送证明 <i class="fas fa-sort"></i></th>
                        <th class="actions-col">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox" class="order-checkbox"></td>
                        <td>
                            <a href="/upsystem/tms_order_detail?wayBillNumber=YT2524000704756694" class="waybill-link">
                                <span class="waybill-number">YT2524000704756694</span>
                            </a>
                        </td>
                        <td>ORD-001</td>
                        <td>TRK123456789</td>
                        <td>空运</td>
                        <td>John Smith</td>
                        <td><span class="tms-status-badge transit">运输中</span></td>
                        <td>2024-01-15 10:30</td>
                        <td>2.5 kg</td>
                        <td>¥156.80</td>
                        <td>美国</td>
                        <td>US123456789</td>
                        <td>+1 555-123-4567</td>
                        <td>2024-01-15 14:20</td>
                        <td>1</td>
                        <td>IM123456789</td>
                        <td>¥0.00</td>
                        <td>5-7天</td>
                        <td>2.8 kg</td>
                        <td>123 Main Street</td>
                        <td>California</td>
                        <td>Apt 4B</td>
                        <td>ABC Corp</td>
                        <td>2024-01-15 09:15</td>
                        <td>VAT123456</td>
                        <td>Los Angeles</td>
                        <td>已上传</td>
                        <td>
                            <button class="tms-btn tms-btn-secondary btn-sm">查看</button>
                            <button class="tms-btn tms-btn-primary btn-sm">编辑</button>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="order-checkbox"></td>
                        <td>
                            <a href="/upsystem/tms_order_detail?wayBillNumber=YT2523900802345678" class="waybill-link">
                                <span class="waybill-number">YT2523900802345678</span>
                            </a>
                        </td>
                        <td>ORD-002</td>
                        <td>TRK987654321</td>
                        <td>海运</td>
                        <td>Emma Johnson</td>
                        <td><span class="tms-status-badge scheduled">已安排</span></td>
                        <td>2024-01-14 15:45</td>
                        <td>5.2 kg</td>
                        <td>¥298.50</td>
                        <td>英国</td>
                        <td>GB987654321</td>
                        <td>+44 20 7946 0958</td>
                        <td>2024-01-14 16:30</td>
                        <td>2</td>
                        <td>IM987654321</td>
                        <td>¥50.00</td>
                        <td>15-20天</td>
                        <td>5.5 kg</td>
                        <td>456 High Street</td>
                        <td>England</td>
                        <td>Unit 7</td>
                        <td>XYZ Ltd</td>
                        <td>2024-01-14 14:20</td>
                        <td>VAT987654</td>
                        <td>London</td>
                        <td>待上传</td>
                        <td>
                            <button class="tms-btn tms-btn-secondary btn-sm">查看</button>
                            <button class="tms-btn tms-btn-primary btn-sm">编辑</button>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="order-checkbox"></td>
                        <td>
                            <a href="/upsystem/tms_order_detail?wayBillNumber=YT2523801001599989" class="waybill-link">
                                <span class="waybill-number">YT2523801001599989</span>
                            </a>
                        </td>
                        <td>ORD-003</td>
                        <td>TRK456789123</td>
                        <td>空运</td>
                        <td>Michael Brown</td>
                        <td><span class="tms-status-badge received">已接收</span></td>
                        <td>2024-01-13 11:20</td>
                        <td>1.8 kg</td>
                        <td>¥89.90</td>
                        <td>德国</td>
                        <td>DE456789123</td>
                        <td>+49 30 12345678</td>
                        <td>2024-01-13 12:15</td>
                        <td>1</td>
                        <td>IM456789123</td>
                        <td>¥0.00</td>
                        <td>7-10天</td>
                        <td>2.0 kg</td>
                        <td>789 Berliner Straße</td>
                        <td>Berlin</td>
                        <td>Nr. 12</td>
                        <td>DEF GmbH</td>
                        <td>2024-01-13 10:45</td>
                        <td>VAT456789</td>
                        <td>Berlin</td>
                        <td>已上传</td>
                        <td>
                            <button class="tms-btn tms-btn-secondary btn-sm">查看</button>
                            <button class="tms-btn tms-btn-primary btn-sm">编辑</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 分页 -->
    <div class="tms-pagination">
        <div class="tms-pagination-info">
            显示 1-3 条，共 1,234 条记录
        </div>
        <div class="tms-pagination-controls">
            <select class="tms-page-size-select">
                <option value="10">10 条/页</option>
                <option value="20" selected>20 条/页</option>
                <option value="50">50 条/页</option>
                <option value="100">100 条/页</option>
            </select>
            <div class="tms-pagination-buttons">
                <button class="tms-page-btn" disabled>上一页</button>
                <button class="tms-page-btn active">1</button>
                <button class="tms-page-btn">2</button>
                <button class="tms-page-btn">3</button>
                <button class="tms-page-btn">...</button>
                <button class="tms-page-btn">62</button>
                <button class="tms-page-btn">下一页</button>
            </div>
        </div>
    </div>
</div>

<script src="/assets/upsystem/js/tms_common.js"></script>
<script>
// 使用TMS系统的JavaScript功能
document.addEventListener('DOMContentLoaded', function() {
    // 初始化TMS系统
    if (window.TMS) {
        console.log('订单中心页面初始化开始');

        // 绑定事件
        bindEvents();

        console.log('订单中心页面初始化完成');
    } else {
        console.warn('TMS系统未加载，使用基础功能');
        bindEvents();
    }
});

// 绑定事件
function bindEvents() {
    // 全选复选框
    const selectAll = document.getElementById('selectAll');
    if (selectAll) {
        selectAll.addEventListener('change', handleSelectAll);
    }

    // 订单复选框
    const orderCheckboxes = document.querySelectorAll('.order-checkbox');
    orderCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', handleOrderCheckboxChange);
    });

    // 状态标签页
    const tabItems = document.querySelectorAll('.tms-tab-item');
    tabItems.forEach(tab => {
        tab.addEventListener('click', handleTabClick);
    });

    // 搜索按钮
    const searchBtn = document.getElementById('searchBtn');
    if (searchBtn) {
        searchBtn.addEventListener('click', handleSearch);
    }

    // 操作按钮
    const intelligentSettingBtn = document.getElementById('intelligentSettingBtn');
    if (intelligentSettingBtn) {
        intelligentSettingBtn.addEventListener('click', handleIntelligentSetting);
    }

    const releaseBtn = document.getElementById('releaseBtn');
    if (releaseBtn) {
        releaseBtn.addEventListener('click', handleRelease);
    }

    const returnBtn = document.getElementById('returnBtn');
    if (returnBtn) {
        returnBtn.addEventListener('click', handleReturn);
    }

    const returnDetailsBtn = document.getElementById('returnDetailsBtn');
    if (returnDetailsBtn) {
        returnDetailsBtn.addEventListener('click', handleReturnDetails);
    }

    const awbChangeBtn = document.getElementById('awbChangeBtn');
    if (awbChangeBtn) {
        awbChangeBtn.addEventListener('click', handleAWBChange);
    }

    // 更多操作下拉菜单
    const moreActionsBtn = document.getElementById('moreActionsBtn');
    if (moreActionsBtn) {
        moreActionsBtn.addEventListener('click', toggleMoreActionsMenu);
    }

    // 分页按钮
    const pageBtns = document.querySelectorAll('.tms-page-btn');
    pageBtns.forEach(btn => {
        if (!btn.disabled) {
            btn.addEventListener('click', handlePageChange);
        }
    });

    // 页面大小选择
    const pageSizeSelect = document.querySelector('.tms-page-size-select');
    if (pageSizeSelect) {
        pageSizeSelect.addEventListener('change', handlePageSizeChange);
    }
}

// 全选处理
function handleSelectAll(e) {
    const orderCheckboxes = document.querySelectorAll('.order-checkbox');
    orderCheckboxes.forEach(checkbox => {
        checkbox.checked = e.target.checked;
    });

    if (window.TMS) {
        console.log('全选状态变化:', e.target.checked);
    }
}

// 订单复选框变化处理
function handleOrderCheckboxChange(e) {
    const checkedCount = document.querySelectorAll('.order-checkbox:checked').length;
    const totalCount = document.querySelectorAll('.order-checkbox').length;

    // 更新全选状态
    const selectAll = document.getElementById('selectAll');
    if (selectAll) {
        selectAll.checked = checkedCount === totalCount;
        selectAll.indeterminate = checkedCount > 0 && checkedCount < totalCount;
    }

    if (window.TMS) {
        console.log('订单选择状态变化，已选择:', checkedCount);
    }
}

// 标签页点击处理
function handleTabClick(e) {
    const tabItems = document.querySelectorAll('.tms-tab-item');
    tabItems.forEach(tab => tab.classList.remove('active'));

    e.target.closest('.tms-tab-item').classList.add('active');

    const status = e.target.closest('.tms-tab-item').dataset.status;

    if (window.TMS) {
        console.log('切换到状态标签:', status);
    }

    // 这里可以加载对应状态的订单数据
    loadOrdersByStatus(status);
}

// 搜索处理
function handleSearch() {
    const waybill = document.getElementById('waybillInput').value.trim();
    const problemType = document.getElementById('problemType').value;

    if (window.TMS) {
        console.log('执行搜索:', { waybill, problemType });
    }

    // 这里可以执行搜索逻辑
    alert(`搜索条件：运单号=${waybill}, 问题类型=${problemType}`);
}

// 智能设置处理
function handleIntelligentSetting() {
    if (window.TMS) {
        console.log('用户点击智能设置');
    }
    alert('智能设置功能');
}

// 释放处理
function handleRelease() {
    if (window.TMS) {
        console.log('用户点击释放');
    }
    alert('释放功能');
}

// 退回处理
function handleReturn() {
    if (window.TMS) {
        console.log('用户点击退回');
    }
    alert('退回功能');
}

// 退回详情处理
function handleReturnDetails() {
    if (window.TMS) {
        console.log('用户点击退回详情');
    }
    alert('退回详情功能');
}

// AWB变更处理
function handleAWBChange() {
    if (window.TMS) {
        console.log('用户点击AWB变更');
    }
    alert('AWB变更功能');
}

// 切换更多操作菜单
function toggleMoreActionsMenu() {
    const menu = document.getElementById('moreActionsMenu');
    if (menu) {
        menu.classList.toggle('show');
    }
}

// 页面变化处理
function handlePageChange(e) {
    const pageBtns = document.querySelectorAll('.tms-page-btn');
    pageBtns.forEach(btn => btn.classList.remove('active'));

    e.target.classList.add('active');

    const page = e.target.textContent;

    if (window.TMS) {
        console.log('切换到页面:', page);
    }

    // 这里可以加载对应页面的数据
    loadOrdersByPage(page);
}

// 页面大小变化处理
function handlePageSizeChange(e) {
    const pageSize = e.target.value;

    if (window.TMS) {
        console.log('页面大小变化:', pageSize);
    }

    // 这里可以重新加载数据
    loadOrdersWithPageSize(pageSize);
}

// 加载指定状态的订单
function loadOrdersByStatus(status) {
    if (window.TMS) {
        console.log('加载状态订单:', status);
    }
    // 实现加载逻辑
}

// 加载指定页面的订单
function loadOrdersByPage(page) {
    if (window.TMS) {
        console.log('加载页面订单:', page);
    }
    // 实现加载逻辑
}

// 加载指定页面大小的订单
function loadOrdersWithPageSize(pageSize) {
    if (window.TMS) {
        console.log('加载页面大小订单:', pageSize);
    }
    // 实现加载逻辑
}
</script>
{% endblock %}
